<template>
  <div class="MenuBar">
    <!-- 最小化 -->
    <div @click="minimize" class="icon" title="最小化">
      <svg t="1664445179126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="6182" :width="iconSize" :height="iconSize">
        <path d="M96 768h832c17.673 0 32 14.327 32 32s-14.327 32-32 32H96c-17.673 0-32-14.327-32-32s14.327-32 32-32z"
          p-id="6183"></path>
      </svg>
    </div>
    <!-- 最大化 -->
    <div @click="maximize" v-show="isMaximized==false" class="icon" title="最大化">
      <svg t="1664445086387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="5858" :width="iconSize" :height="iconSize">
        <path
          d="M800 928H224c-70.692 0-128-57.308-128-128V224c0-70.692 57.308-128 128-128h576c70.692 0 128 57.308 128 128v576c0 70.692-57.308 128-128 128z m64-704c0-35.346-28.654-64-64-64H224c-35.346 0-64 28.654-64 64v576c0 35.346 28.654 64 64 64h576c35.346 0 64-28.654 64-64V224z"
          p-id="5859"></path>
      </svg>
    </div>
    <!-- 还原 -->
    <div @click="restore" v-show="isMaximized==true" class="icon" title="还原">
      <svg t="1664445116789" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="6020" :width="iconSize" :height="iconSize">
        <path
          d="M832 704H704v128c0 70.692-57.308 128-128 128H192c-70.692 0-128-57.308-128-128V448c0-70.692 57.308-128 128-128h128V192c0-70.692 57.308-128 128-128h384c70.692 0 128 57.308 128 128v384c0 70.692-57.308 128-128 128zM192 384c-35.346 0-64 28.654-64 64v384c0 35.346 28.654 64 64 64h384c35.346 0 64-28.654 64-64V448c0-35.346-28.654-64-64-64H192z m704-192c0-35.346-28.654-64-64-64H448c-35.346 0-64 28.654-64 64v128h192c70.692 0 128 57.308 128 128v192h128c35.346 0 64-28.654 64-64V192z"
          p-id="6021"></path>
      </svg>
    </div>
    <!-- 关闭 -->
    <div @click="close" class="icon" title="关闭">
      <svg t="1664445226665" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="6344" :width="iconSize" :height="iconSize">
        <path
          d="M557.327 512l361.29 361.29c12.517 12.517 12.517 32.81 0 45.327-12.517 12.517-32.81 12.517-45.327 0L512 557.327l-361.29 361.29c-12.517 12.517-32.81 12.517-45.327 0-12.517-12.517-12.517-32.81 0-45.327L466.673 512l-361.29-361.29c-12.517-12.517-12.517-32.81 0-45.327 12.517-12.517 32.81-12.517 45.327 0L512 466.673l361.29-361.29c12.517-12.517 32.81-12.517 45.327 0 12.517 12.517 12.517 32.81 0 45.327L557.327 512z"
          p-id="6345"></path>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import isElectron from 'is-electron';// 判断是否是electron环境
console.log(isElectron());

defineProps({
  // 图标大小
  iconSize: {
    type: String,
    default: "18"
  },
  // 图标颜色
  iconColor: {
    type: String,
    default: '#000'
  }
})


// 是否最大化
const isMaximized = ref(false);
// 渲染进程获取主进程模块
// 引入electron/remote 模块,用于获取当前窗口,控制最小化,最大化,关闭窗口
const { BrowserWindow } = require("@electron/remote");
// 获取当前窗口
const win = BrowserWindow.getFocusedWindow();
// 判断是否最大化
win.on("maximize", () => {
  isMaximized.value = true;
});
win.on("unmaximize", () => {
  isMaximized.value = false;
});
// 最小化
const minimize = () => {
  win.minimize();
};
// 最大化
const maximize = () => {
  win.maximize();
  isMaximized.value = true;
};
// 还原
const restore = () => {
  win.restore();
  isMaximized.value = false;
};
// 关闭
const close = () => {
  win.close();
};

</script>

<style lang="less" scoped>
.MenuBar {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 0;

  .icon {
    cursor: pointer;
    fill: currentColor;


    &:hover {
      opacity: 0.8;
      color: #34d399;
    }
  }

  // 左边伪元素分隔
  &::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 24px;
    background-color: #e6e6e6;
  }
}
</style>